<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录页面</title>
    <style>        body {
        font-family: Arial, sans-serif;
        background-color: #f4f4f9;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        margin: 0;
    }

    .login-container {
        background-color: white;
        padding: 2rem;
        border-radius: 8px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }

    .login-container h1 {
        text-align: center;
        color: #333;
    }

    .login-container input[type="text"],
    .login-container input[type="password"] {
        width: 100%;
        padding: 12px 16px;
        margin-bottom: 1rem;
        border: 1px solid #ccc;
        border-radius: 4px;
        box-sizing: border-box;
    }

    .login-container input[type="button"] {
        width: 100%;
        padding: 12px 16px;
        background-color: #007BFF;
        color: white;
        border: none;
        border-radius: 4px;
        cursor: pointer;
    }

    .login-container input[type="button"]:hover {
        background-color: #0056b3;
    }
    </style>
</head>
<body>

<div class="login-container">
    <h1>登录页面</h1>
    <input type="text" placeholder="用户名" v-model="user.username">
    <input type="password" placeholder="密码" v-model="user.password">
    <input type="button" value="登录" @click="login()">
</div>

<!-- 引入axios和vue的框架文件 -->
<script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script>    let v = new Vue({
    el: ".login-container",
    data:{
        user:{username:"", password:""}
    },
    methods:{
        login(){
            axios.post("/v1/users/login", v.user).then(function (response){
                if (response.data==1){
                    alert("登录成功");
                    location.href = "/";
                }else if(response.data==2){
                    alert("密码错误");
                }else{
                    alert("用户名不存在");
                }
            })
        }
    }
})
</script>

</body>
</html>